<template>
  <div>
    <span>用户名</span>
    <input type="text" v-model="obj.username" />
    <span>密码</span>
    <input type="password" v-model="obj.password" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        username: "",
        password: "",
      },
    };
  },
  watch: {
    //当侦听的变量发生了变化,会触发对应函数的执行(拿到最新值,和上一课刻的旧值)
    // username(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    // password(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    obj: {
      handler(newVal, oldVal) {//handler方法名固定
        console.log(newVal, oldVal);
      },
      deep: true, //深度监听(对象的属性改变了,也会触发handler函数)
      immediate: true, //立即监听  网页刚打开,就会让handler触发一次
    },
  },
};
</script>

<style>
</style>